<template>
  <div class="login-modal" v-show="vuex_visible">
    <div class="box">
      <img @click="handleClose" class="close" src="@/assets/img/close.png" />
      <div>
        <div class="bindWechat" v-if="!!vuex_uuid">手机绑定微信</div>
        <ul class="form-title" v-else>
          <li class="current">手机号码登录</li>
          <li @click="handleWechatLogin">微信扫码登录</li>
        </ul>
        <div class="form-box">
          <div>
            <input
              v-model.trim="phoneNum"
              type="text"
              placeholder="请输入手机号"
            />
          </div>
          <div v-if="!vuex_uuid">
            <slide-verify
              :l="42"
              :r="10"
              :w="360"
              :h="185"
              slider-text="向右滑动"
              :imgs="slideImgs"
              @success="onSuccessSlide"
              @fail="onFailSlide"
              @refresh="onFailSlide"
            />
          </div>
          <div class="capture">
            <input
              v-model.trim="captureNum"
              type="text"
              placeholder="请输入短信验证码"
            />
            <div
              v-show="phoneNumOk"
              class="capture-btn"
              @click="handleGetCapture"
            >
              {{ captureHasClick ? captureCountdown : "获取验证码" }}
            </div>
          </div>
          <div class="login-btn" @click="handleLogin">登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as vuex from "vuex";
import * as util from "@/utils/utils";

let timer = null;

export default {
  beforeDestroy() {
    clearInterval(timer);
  },
  data() {
    return {
      phoneNum: "",
      slideOk: false,
      captureNum: "",
      captureHasClick: false,
      captureCountdown: 5,
      slideImgs: [
        require("@/assets/img/integral-01.9386d4bf.png"),
        require("@/assets/img/integral-02.150d92a1.png"),
        require("@/assets/img/integral-03.9870f3f1.png"),
        require("@/assets/img/integral-04.afadcbdf.png"),
      ],
    };
  },
  computed: {
    ...vuex.mapState({
      vuex_visible: (state) => state.login.loginModalVisible,
      vuex_beforeLoginedPushPath: (state) => state.login.beforeLoginedPushPath,
      vuex_uuid: (state) => state.login.uuid,
    }),
    phoneNumOk() {
      if (this.vuex_uuid) {
        return /^1[3-8][0-9]{9}$/.test(this.phoneNum);
      }
      return /^1[3-8][0-9]{9}$/.test(this.phoneNum) && this.slideOk;
    },
  },
  methods: {
    ...vuex.mapMutations({
      vuex_showModal: "login/showLoginModal",
      vuex_clearPath: "login/clearBeforeLoginedPushPath",
      vuex_modifyLoginState: "login/modifyLoginState",
      vuex_clearUuid: "login/clearUuid",
    }),
    // 手动触发
    handleClose() {
      this.vuex_showModal(false);
      this.refreshData();
      if (this.vuex_beforeLoginedPushPath) {
        this.vuex_clearPath();
      }
      if (this.vuex_uuid) {
        this.vuex_clearUuid();
      }
    },
    handleGetCapture() {
      this.captureHasClick = true;
      if (timer) {
        return;
      }
      timer = setInterval(() => {
        if (this.captureCountdown > 1) {
          this.captureCountdown -= 1;
        } else {
          this.captureHasClick = false;
          clearInterval(timer);
          this.captureCountdown = 5;
          timer = null;
        }
      }, 1000);
    },
    handleLogin() {
      if (this.beforeLoginTest()) {
        this.$store.dispatch('toast/showToast', {
          text: '请检查信息输入情况',
          type: 'warn'
        })
        return;
      }
      setTimeout(() => {
        this.afterLogin();
      }, 1000);
    },
    handleWechatLogin() {
      if (confirm("扫码登陆，请确定是否已绑定微信")) {
        console.log("已绑定");
        this.refreshPage();
        // 通知 APP.vue 获取用户信息
      } else {
        console.log("未绑定");
        localStorage.setItem("uuid", "i am uuid 112233");
        this.refreshPage();
      }
    },

    // 组件静态方法
    onSuccessSlide() {
      this.slideOk = true;
    },
    onFailSlide() {
      this.slideOk = false;
    },

    // 复杂、重复逻辑抽离
    refreshData() {
      this.phoneNum = "";
      this.slideOk = false;
      this.captureNum = "";
    },
    refreshPage() {
      localStorage.setItem("wechatLogin", "yes");
      window.location.replace(
        window.location.origin + window.location.pathname + "?code=123"
      );
    },
    beforeLoginTest() {
      // 手机号绑定微信时弹窗确认
      if (!!this.vuex_uuid && !this.phoneNumOk) {
        return true;
      }
      // 手机号登陆时弹窗确认
      console.log('@!this.vuex_uuid', !this.vuex_uuid)
      console.log('@!this.slideOk', !this.slideOk)
      console.log('@!this.phoneNumOk', !this.phoneNumOk)
      if (!this.vuex_uuid && (!this.slideOk || !this.phoneNumOk)) {
        return true;
      }
      return false;
    },
    afterLogin() {
      alert("登录成功");

      localStorage.setItem("token", "12345");
      this.vuex_modifyLoginState(true);
      util.getUserInfo();
      this.vuex_showModal(false);

      this.refreshData();

      if (this.vuex_beforeLoginedPushPath) {
        this.$router.push(this.vuex_beforeLoginedPushPath);
        this.vuex_clearPath();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login-modal {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  height: 100vh;
  width: 100vw;
  background: rgba(#000, 0.5);
  z-index: 999;
}
.box {
  width: 555px;
  height: 423px;
  margin: auto;
  background: url("@/assets/img/login-box-bg.png");
  position: relative;
  & > div:last-child {
    height: 100%;
    padding: 50px 60px 0;
  }
}
.close {
  position: absolute;
  right: 65px;
  top: 22px;
  cursor: pointer;
}
.form-title {
  display: flex;
  justify-content: center;
  li {
    padding: 0 15px;
    font-size: 16px;
    position: relative;
    color: #999;
    cursor: pointer;
  }
  li:first-child::after {
    content: "";
    height: 100%;
    border-right: 1px solid #777;
    position: absolute;
    right: 0px;
  }
}
.current {
  color: #000 !important;
}
.bindWechat {
  margin: 20px 0;
  font-size: 18px;
  font-weight: 600;
}
.form-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  input {
    display: inline-block;
    width: 336px;
    height: 46px;
    border: 1px solid #e6e6e6;
    outline: none; /* 光标键入时的边框样式修改 */
    padding-left: 20px;
  }
  & > div {
    width: 360px;
    margin-top: 15px;
    height: 50px;
  }
}
.capture {
  display: flex;
  input {
    width: 240px;
    margin-right: 10px;
  }
  .capture-btn {
    flex: 1;
    background-color: #e8e8e8;
    line-height: 50px;
    cursor: pointer;
  }
}
.login-btn {
  color: #ffffff;
  background-color: #0a328e;
  line-height: 50px;
  cursor: pointer;
}
/deep/ .slide-verify {
  position: absolute;
  top: -10px;
  canvas,
  .slide-verify-refresh-icon {
    display: none;
    position: absolute;
    top: -190px;
  }
  &:hover {
    canvas,
    .slide-verify-refresh-icon {
      display: block;
    }
  }
}
</style>